<template>
	<view class="comAll" v-if="modelVisible" @click="cancel">
		<view class="content" @click.stop>
			<view class="tip" :style="'background-image:url('+imgSrc+')'">
				<uParse :content="title" class="richText"></uParse>
			</view>
			<view class="bottomBtn">
				<button @click="cancel" hover-class="subActive">
					<view class="btnIcon"></view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		props:{
			title: String,
			modelVisible:Boolean,
			imgProp:{
				mode: 'widthFix',
				domain: 'https://hongbiao.oss-cn-hangzhou.aliyuncs.com/',
			}
		},
		data() {
			return {
				imgSrc: require('../../static/index/modalBack.jpg'),
			}
		},
		methods:{
			cancel() {
				this.$emit("hiddenModal")
				uni.showTabBar({})
			},
		},
		components:{
			uParse,
		}
	}
</script>

<style scoped>
	.comAll{
		position: fixed;
		height:100%;
		padding: 17upx;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,0.65);
		display: flex;
	}
	/* 背景虚化  */
	.comAll:after{
		filter: blur(20px);
		-webkit-filter: blur(20px);  /* Chrome, Safari, Opera */
	}
	.content{
		margin: auto 0;
		width:100%;
	}
	.tip{
		height: 546.66upx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		/* padding: 17upx; */
		border-radius: 10upx;
		overflow-y: auto;
	}
	.tip rich-text{ 
		/* font-size: 57.33upx;
		color:#FFF;
		margin: auto 0;
		line-height: 100upx; */
	}
	.richText{
		/* padding: 17upx; */
		width:100%;
	}
	.bottomBtn {
		margin-top: 30upx;
	}
	.bottomBtn button{
		width:49.33upx;
		height:55upx;
		background-color: #fbe8e7;
	}
	.btnIcon:before,
	.btnIcon:after {
		content: "";
		position: absolute;
		background: #ca4837;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	
	.btnIcon:before {
		width: 55upx;
		height: 7upx;
		border-radius: 10upx;
	}
	
	.btnIcon:after {
		width: 7upx;
		height: 55upx;
		border-radius: 10upx;
	}
	.subActive{
		background-color: #FFC8C7 !important;
	}
</style>
